<template>
<div>
  <div class="banner" @click="handleBannerClick">
    <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1603/3b/3bd311262ee06d8c90.img.jpg_600x330_cd2e3bf7.jpg" alt="长隆欢乐世界">
    <div class="banner-info">
      <div class="banner-title">广州长隆旅游度假区(AAAAA景区)</div>
      <div class="banner-number">
        <span class="iconfont banner-icon">&#xe678;</span>
        39
      </div>
    </div>
  </div>
  <Gallary :imgs="imgs" v-show="showGallary" @close="handleGallaryClose"></Gallary>
</div>
</template>

<script>
  import Gallary from './gallary'
  export default {
    name: 'DetailBanner',
    data () {
      return {
        imgs:['http://img1.qunarzz.com/sight/p0/201405/29/b5d02d4967e16b8cbc40f1dbd8186e6f.jpg_r_800x800_504fbd5c.jpg',
              'http://img1.qunarzz.com/sight/p0/201405/22/082badbddfb99f94e946c93d444bc6e9.jpg_r_800x800_afadf301.jpg'
            ],
        showGallary: false
      }
    },
    components: {
      Gallary
    },
    methods: {
      handleBannerClick () {
        this.showGallary = true
      },
      handleGallaryClose () {
        this.showGallary = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .banner{
    overflow: hidden;
    height: 0;
    padding-bottom: 55%;
    position: relative;
    .banner-img{
      width:100%
    }
    .banner-info{
      display: flex;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: .6rem;
      color: #fff;
      background-image: linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,.8));
      .banner-title{
        flex: 1;
        font-size: .32rem;
        padding: 0 .2rem;
      }
      .banner-number{
        margin-top: .14rem;
        padding: 0 .4rem;
        line-height: .32rem;
        height: .32rem;
        border-radius: .2rem;
        background-color: rgba(0, 0, 0, 0.8);
        font-size: .24rem;
        .banner-icon{
          font-size: .24rem
        }
      }
    }
  }
</style>
